<!--
 * @Author: 风云天子 3013355345@qq.com
 * @Date: 2023-12-20 14:29:46
 * @LastEditors: 风云天子 3013355345@qq.com
 * @LastEditTime: 2023-12-20 14:43:22
 * @FilePath: \fssc-common\demo\src\views\one-menu\TestTwo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <FsPageLayout
      :table-props="tableProps"
      :search-props="searchProps"
    >
      <template #dateRange="{searchData}">
        <FsDateRange v-model:start-value="searchData.startDate" v-model:end-value="searchData.endDate" start-placeholder="开始日期" end-placeholder="结束日期" />
      </template>
      <template #status="{searchData}">
        <el-select v-model="searchData.status" placeholder="请选择状态">
          <el-option label="全部" value="all"></el-option>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="审核不通过" value="2"></el-option>
        </el-select>
      </template>
      <template #tabs>
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
        >
          <el-tab-pane
            label="User"
            name="first"
          />
          <el-tab-pane
            label="Config"
            name="second"
          />
        </el-tabs>
      </template>
      <template #action>
        <el-button
          type="primary"
          size="small"
          @click="TestClick"
        >
          测试
        </el-button>
      </template>
      <template #test="{row, index}">
        进来不{{ row }}~~{{ index }}
      </template>
      <!-- <div @click="TestClick">
        @@@@
      </div> -->
    </FsPageLayout>
  </div>
</template>
<script setup lang="ts">
import { FsPageLayout, FsDialog, FsDateRange } from '@fssc/admin';
import { ref, h, getCurrentInstance } from 'vue';

const useTable = () => {
  const tableColumns = [
    {
      prop: 'test',
      width: '100px',
      label: '测试',
    },
    {
      prop: 'test',
      width: '300px',
      label: '测试2',
    },
    {
      prop: 'test',
      width: '200px',
      label: '测试3',
    },
    {
      prop: 'test',
      width: '300px',
      label: '测试4',
    },
  ];
  return {
    tableProps: {
      tableColumns,
    }
  };
};
const useSearch = () => {
  const searchOptions = [
    {
      formItemProps: { prop: 'transferOrderCode', label: '申请单号' },
      inputName: 'ElInput',
      inputProps: { clearable: true, placeholder: '请输入申请单号' },
    },
    {
      formItemProps: { prop: 'transferOrderCode', label: '申请单号' },
      inputName: 'ElInput',
      inputProps: { clearable: true, placeholder: '请输入申请单号' },
    },
    {
      formItemProps: { prop: 'transferOrderCode', label: '申请单号' },
      inputName: 'ElInput',
      inputProps: { clearable: true, placeholder: '请输入申请单号' },
    },
    {
      formItemProps: { prop: 'transferOrderCode', label: '申请单号' },
      inputName: 'ElInput',
      inputProps: { clearable: true, placeholder: '请输入申请单号' },
    },
    {
      formItemProps: { prop: 'www', label: '申请单号' },
      inputName: 'ElInput',
      initialValue: 'ddd',
      inputProps: { clearable: true, placeholder: '请输入申请单号', label: '申请单号' },
    },
    { formItemProps: { prop: 'dateRange', label: '选择时间' }, valueObject: { startDate: null, endDate: null }},
    { formItemProps: { prop: 'status', label: '选择状态' }},
  ];
  return {
    searchProps: {
      searchOptions
    }
    ,
  };
};
const { searchProps } = useSearch();
const { tableProps } = useTable();
const { proxy } = getCurrentInstance()
const TestClick = () => {
  console.log(proxy.$useDialog, 'FsDialog');
  proxy.$useDialog({
    data: {
      a: '11'
    },
    options: {
      title: '测试',
    },
    propsComponent: () => import('./components/test1.vue'),
  })
    .then(() => {})
    .catch(() => {});
};
const useTabs = () => {
  const activeName = ref('');
  return {
    activeName,
  };
};
const { activeName } = useTabs();
</script>
<style lang="scss" scoped></style>
